<template>
    <el-dialog :title="type == 'add' ? '添加模版' : '修改模版'" v-model="visible" width="400px">
        <el-form label-width="100px" >
            <el-form-item label="模版名称">
                <el-input type="text" v-model="title"></el-input>
            </el-form-item>
            <el-form-item label="开发语言">

                <el-select @change="handleOption" v-model="codeOption.code" size="small">
                    <el-option v-for="item in options" :key="item.id" :label="item.code" :value="item" />
                </el-select>

            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>

                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
    import * as db_context from '@/models/db_context'
    import {
        onMounted,
        reactive,
        ref,
        toRefs
    } from 'vue'

    import {
        ElMessage
    } from 'element-plus'

    export default {
        name: 'DialogAddTemplate',
        props: {
            type: String, // 用于判断是添加还是编辑
            reload: Function // 添加或修改完后，刷新列表页
        },
        setup(props: any) {
            const formRef = ref < any > (null)
            const state = reactive({
                visible: false,
                tId: "0",
                isTest: 0,
                options: [],
                orderStatus: '', // 订单状态
                title: '',
                codeOption: {
                    code: '',
                    id: '',
                },
                id: '0'
            })


            onMounted(() => {
                getCodeOPtions();
            })


            // 获取详情
            const getDetail = async (id: string) => {
                console.log(id);
                state.tId = id;
                const result: any = await db_context.Template.getById(Number.parseInt(id));
                console.log(result);
                state.codeOption.id = result.id;
                state.codeOption.code = result.code;
                state.title = result.name;
                state.tId = result.id;


            }

            // 获取数据列表
            const getCodeOPtions = async () => {
                const results: any = await db_context.GenCode.getList < db_context.GenCode > ();
                state.options = results;
                if (results.length > 0) {
                    state.codeOption.id = results[0].id;
                    state.codeOption.code = results[0].code;
                }
            }

            // 开启弹窗
            const open = (id: string) => {

                //getCodeOPtions();
                state.visible = true
                if (id) {
                    console.log('edit')
                    state.id = id
                    // 如果是有 id 传入，证明是修改模式
                    getDetail(id)
                } else {
                    console.log('new')
                    state.tId = "";
                    state.id = "";
                    state.title = "";
                    console.log('1111111111111111')

                }
            }
            // 触发过滤项方法
            const handleOption = (o: any) => {
                state.codeOption.code = o.code,
                    state.codeOption.id = o.id;

            }


            // 关闭弹窗
            const close = () => {
                state.visible = false
            }
            const submitForm = async () => {
                if (state.title == "") {
                    ElMessage.error('名称不能为空');
                    return;
                }
                console.log("eeeeeeee"+state.tId)

                if (state.tId == "") {
                    const item: any = {
                        name: state.title,
                        code: state.codeOption.code,
                        codeId: state.codeOption.id
                    };

                    await db_context.Template.createItem(item);
                    props.reload();
                    ElMessage.success('添加成功');
                    state.visible = false

                } else {
                    const item: any = {
                        name: state.title,
                        code: state.codeOption.code,
                        codeId: state.codeOption.id
                    };
                    await db_context.Template.updateItemById(item, Number.parseInt(state.tId));
                    props.reload();
                    ElMessage.success('修改成功');
                    state.visible = false
                }

            }
            return {
                ...toRefs(state),
                open,
                close,
                formRef,
                handleOption,
                submitForm
            }
        }
    }
</script>